<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Meteora.Calendar</title>
    
    <!-- Meteora -->
    <script src="../../src/meteora.js" type="text/javascript"></script>
    <!-- Meteora -->

    <link type="text/css" rel="stylesheet" href="../css/test.css" />
  </head>
  <body>

    <h1>Meteora.Calendar</h1>

    <div class="instructions">
      Focus each input to show a calendar.
    </div>

    <div class="twocolumns">
      <div class="column">
        
        <h3>Basic calendar</h3>
        <ul class="details">
            <li><b>Predefined date:</b> 1987-07-28 17:58</li>
        </ul>
        <label>
          <input id="date_input_1" type="text" value="1987-07-28 17:58" />
        </label>

        <h3>Basic calendar without a default date (automatically set to today's date)</h3>
        <ul class="details">
          <li><b>Minimum year:</b> 1985</li>
          <li><b>Maximum year:</b> 1990</li>
        </ul>
        <label>
          <input id="date_input_2" type="text" value="" />
        </label>


      </div>
      <div class="column">


        <h3>A variant of the same calendar (initially blank)</h3>
        <ul class="details">
          <li><b>Minimum year:</b> 1990</li>
          <li><b>Maximum year:</b> 1995</li>
        </ul>
        <label>
          <input id="date_input_3" type="text" value="" />
        </label>

      </div>
    </div>

    <script type="text/javascript">

      Meteora.uses('Meteora.Calendar');

      Meteora.onStart(
        function() {

          new Calendar(
            'date_input_1',
            {
              variant:        0,
              displayFormat:  '%X',
              storeFormat:    '%Y-%m-%d %H:%i %X',
              minYear:        2005,
              maxYear:        2010,
              showHour:       false,
              showMinute:     false,
              showSecond:     false,
              showMeridiem:   false,
              onClose: function(el) {
                log('Closed element with value '+el.value+'');
              }
            }
          );
          
          new Calendar(
            'date_input_2',
            {
              variant: 1,
              format: '%Y-%m-%d',
              blank: true,
              minYear: 1990,
              maxYear: 1995
            }
          );

          new Calendar(
            'date_input_3',
            {
              variant: 1,
              format: '%Y-%m-%d',
              blank: true,
              minYear: 1990,
              maxYear: 1995
            }
          );

        }
      );

    </script>

  </body>
</html>
